<!-- 搜索结果 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="搜索结果" :borderBottom="false"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="top">
			<view class="search flex_align">
				<input type="text" v-model="search" confirm-type="search" placeholder="搜索" @confirm="getSerch">
				<view class="iconfont icon-sousuo" @click="getSerch"></view>
			</view>
		</view>
		<view class="grid">
			<navigator :url="'./pointGoodsDetail?id='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
				<image class="goodsImg" :src="item.image"></image>
				<view class="goodsName clamp1">{{item.title}}</view>
				<view class="limit">限量{{item.limit}}份</view>
				<view class="price">{{item.integral}}积分<text>已有{{item.exchange_num}}人兑换</text></view>
			</navigator>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wsousuo.png" mode="widthFix"></image>
			<view class="text">暂无商品</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				search:"",
				cate_id:""
			}
		},
		onLoad(o) {
			_this = this
			_this.search=o.key?o.key:""
			_this.cate_id=o.id?o.id:""
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('isearch', {
					search:_this.search,
					cate_id:_this.cate_id
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			// 搜索
			getSerch() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family: PingFang SC;
	}
	.top{
		padding:30rpx;
		.search{
			width: 690rpx;
			height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #999999;
			border-radius: 31rpx;
			padding-left:44rpx;
			input{
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				flex:1;
			}
			.iconfont{
				width: 110rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color:#FFFFFF;
				font-size: 42rpx;
				background: linear-gradient(96deg,#37be8e 5%, #06adb9 96%);
				border-radius:0 31rpx 31rpx 0;
			}
		}
	}
	.grid{
		display: grid;
		padding:0 30rpx;
		grid-template-columns: repeat(2,50%);
		.item{
			margin-bottom: 40rpx;
			.goodsImg{
				width: 336rpx;
				height: 336rpx;
				margin:0 auto;
				border-radius: 8rpx;
				background-color: #EEEEEE;
			}
			.goodsName{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 64rpx;
			}
			.limit{
				display: inline-block;
				height: 34rpx;
				padding:0 10rpx;
				background: #FED8D8;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: 500;
				text-align: center;
				color: #F73F3F;
				line-height: 34rpx;
				margin-bottom: 10rpx;
			}
			.price{
				font-size: 28rpx;
				font-weight: 700;
				color: #f73f3f;
				text{
					font-size: 20rpx;
					color: #999999;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
